<breadcrumbs></breadcrumbs>

<div class="content-container">
    <form name="changePasswordForm" novalidate="novalidate">

        <label><message key="gen.nickname.title"></message></label>
        <div class="form-control-group">
            <div class="form-control-group-static">
                <user-label user="user"></user-label>
            </div>
        </div>

        <label ng-show="requiresOldPassword()" for="old-password-clear"><message key="changePassword.oldPasswordClear.title"></message></label>
        <div ng-show="requiresOldPassword()" class="form-control-group" ng-class="deriveFormControlsContainerClasses('oldPasswordClear')">
            <input
                    id="old-password-clear"
                    type="password"
                    name="oldPasswordClear"
                    autocomplete="off"
                    ng-change="oldPasswordChanged()"
                    ng-required="requiresOldPassword()"
                    ng-model="changePasswordData.oldPasswordClear"></input>
            <error-messages key-prefix="changePassword.oldPasswordClear" error="changePasswordForm.oldPasswordClear.$error"></error-messages>
        </div>

        <label for="new-password-clear"><message key="changePassword.newPasswordClear.title"></message></label>
        <div class="form-control-group" ng-class="deriveFormControlsContainerClasses('newPasswordClear')">
            <input
                    id="new-password-clear"
                    type="password"
                    name="newPasswordClear"
                    valid-password=""
                    autocomplete="off"
                    ng-change="newPasswordsChanged()"
                    ng-required="true"
                    ng-model="changePasswordData.newPasswordClear"></input>
            <error-messages key-prefix="changePassword.newPasswordClear" error="changePasswordForm.newPasswordClear.$error"></error-messages>
        </div>

        <label for="new-password-clear-repeated"><message key="changePassword.newPasswordClearRepeated.title"></message></label>
        <div class="form-control-group" ng-class="deriveFormControlsContainerClasses('newPasswordClearRepeated')">
            <input
                    id="new-password-clear-repeated"
                    type="password"
                    autocomplete="off"
                    name="newPasswordClearRepeated"
                    ng-change="newPasswordsChanged()"
                    ng-required="true"
                    ng-model="changePasswordData.newPasswordClearRepeated"></input>
            <error-messages key-prefix="changePassword.newPasswordClearRepeated" error="changePasswordForm.newPasswordClearRepeated.$error"></error-messages>
        </div>

        <label for="captcha-response-input"><message key="changePassword.captchaResponse.title"></message></label>
        <div class="form-control-group" ng-class="deriveFormControlsContainerClasses('captchaResponse')">
            <img style="vertical-align:middle;" ng-src="{{captchaImageUrl}}"></img>
            =
            <input
                    id="captcha-response-input"
                    size="3"
                    type="text"
                    autocomplete="off"
                    name="captchaResponse"
                    ng-required="true"
                    ng-change="captchaResponseDidChange()"
                    ng-model="changePasswordData.captchaResponse"></input>
            <error-messages key-prefix="changePassword.captchaResponse" error="changePasswordForm.captchaResponse.$error"></error-messages>
        </div>

        <div class="form-action-container">
            <button
                    ng-disabled="changePasswordForm.$invalid"
                    ng-click="goChangePassword()"
                    type="submit"
                    class="main-action">
                <message key="changePassword.action.title"></message>
            </button>
        </div>

    </form>
</div>

<div class="footer"></div>
<spinner spin="shouldSpin()"></spinner>

